<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" type="text/css"  href="../../static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css"  href="../../static/bootstrap/css/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="../../static/bootstrap/js/jquery.js"></script>
    <script type="text/javascript" src="../../static/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../../static/bootstrap/js/index.js"></script>
    <script type="text/javascript" src="../../static/bootstrap/js/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<script>
window.onscroll = function() {
    var result = document.querySelector(".div0");
    var result1 = document.querySelector(".div2");
    var bar = document.querySelector("#navbar_head");
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(top);
    if(top>700){
        bar.classList.add('animate__animated', 'animate__flipInX');
        bar.style.setProperty('--animate-duration', '0.6s');
        bar.style.backgroundColor = 'white';
    }
    else{
        bar.style.backgroundColor = 'transparent';
        bar.classList.remove('animate__animated', 'animate__flipInX');
        bar.style.setProperty('--animate-duration', '0.1s');
    }
    if(top > (result.offsetTop - result.offsetHeight)) {　　　　　　　　　　　　
        result.classList.add('animate__animated', 'animate__lightSpeedInLeft');
        result.style.setProperty('--animate-duration', '2s');
    }
    if(top > (result1.offsetTop - result1.offsetHeight)) {　　　　　　　　　　　　
        result1.classList.add('animate__animated', 'animate__lightSpeedInRight');
        result1.style.setProperty('--animate-duration', '2s');
    }
}
</script>
<body style="height: 3000px;">
     <div id="head_library">
      <nav class="navbar navbar-default navbar-fixed-top index_head" id="navbar_head">
        <div class="container-fluid"  >
          <img src="../../static/images/logo.png" style="clear: both; height: 60px;" alt="">
          <div class="btn-group" role="group" aria-label="..." id="list_aw" style="margin-left: 600px;">
            <a  href={% url "comment" %}><button type="button" class="btn btn-default" style="border:none;background-color: transparent;">读者评论</button></a>
            <a  href='#'}><button type="button" class="btn btn-default" style="border:none;background-color: transparent;">文献资料</button></a>
            <a  href='#'}><button type="button" class="btn btn-default" style="border:none;background-color: transparent;">关于本馆</button></a>
            <a  href='#'}><button type="button" class="btn btn-default" style="border:none;background-color: transparent;">服务指南</button></a>
            <a  href='https://lib.buaa.edu.cn/'}><button type="button" class="btn btn-default" style="border:none;background-color: transparent;">返回官方</button></a>
          </div> 
        <div id="words_color" >
          <a href="login"><svg width="60px" height="60px" viewBox="0 0 16 16" class="bi bi-person-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.468 12.37C12.758 11.226 11.195 10 8 10s-4.757 1.225-5.468 2.37A6.987 6.987 0 0 0 8 15a6.987 6.987 0 0 0 5.468-2.63z"/>
            <path fill-rule="evenodd" d="M8 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
            <path fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z"/>
          </svg></a></div>
      </div>
      </nav>
     </div>
     <div id="head_bottom">
          
      <div id="carousel-example-generic" class="carousel slide damu-carousel" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div id="sousuo_list" onclick="hidden1()" >
            <div id="sousuo_1">
              <li onmouseover="g1w()">馆藏检索</li>
              <li onmouseover="g2w()">中文发现</li>
              <li onmouseover="g3w()">外文发现</li>
              <li onmouseover="g4w()">百度学术</li>
              <li>  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
                <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
              </svg></li>
            </div>
          </div>
          <div id="hidden_1"  >
            <div style="margin-top: 7%;"></div>
           <div class="row">
             <div class="col-lg-6" style="width: 100%;margin-left: 8%;margin-top: 8%;"> 
               <form action="search_result_res">
                 <input type="text"id="sousuo_2" class="form-control" placeholder="搜索内容" name = "search_info" value="在此输入要查找的内容" onclick="xiaoshi()">
                  <input id="submit_sousuo" class="btn btn-primary" type="submit" value="搜索" >
             </form>
             </div>
           </div>
           <div id="explain_bottom" style="margin-top: 4%;" ><div id="explain_1">说明：</div></div>
          </div>
           <div id="choose_picture">
            <div style="float: left;margin-left: 13%;">
              <table>
                <tr>
                  <td>
                    <svg width="40px" height="40px"  viewBox="0 0 16 16" class="bi bi-clock" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm8-7A8 8 0 1 1 0 8a8 8 0 0 1 16 0z"/>
                      <path fill-rule="evenodd" d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z"/>
                    </svg>
                  </td>
                </tr>
                 <tr><td>开馆时间</td></tr>
              </table>
            </div>
            <div style="float: left; height:50px;margin-left: 10%;">
              <table>
                <tr>
                  <td>
                    <svg width="40px" height="40px" viewBox="0 0 16 16" class="bi bi-book" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M1 2.828v9.923c.918-.35 2.107-.692 3.287-.81 1.094-.111 2.278-.039 3.213.492V2.687c-.654-.689-1.782-.886-3.112-.752-1.234.124-2.503.523-3.388.893zm7.5-.141v9.746c.935-.53 2.12-.603 3.213-.493 1.18.12 2.37.461 3.287.811V2.828c-.885-.37-2.154-.769-3.388-.893-1.33-.134-2.458.063-3.112.752zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
                    </svg>
                  </td>
                </tr>
                 <tr><td>书籍借阅</td></tr>
              </table>
            </div>
            <div style="float: left; height:50px;margin-left: 10%;">
              <table
              ><tr>
                <td>
                  <svg width="40px" height="40px" viewBox="0 0 16 16" class="bi bi-tools" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M0 1l1-1 3.081 2.2a1 1 0 0 1 .419.815v.07a1 1 0 0 0 .293.708L10.5 9.5l.914-.305a1 1 0 0 1 1.023.242l3.356 3.356a1 1 0 0 1 0 1.414l-1.586 1.586a1 1 0 0 1-1.414 0l-3.356-3.356a1 1 0 0 1-.242-1.023L9.5 10.5 3.793 4.793a1 1 0 0 0-.707-.293h-.071a1 1 0 0 1-.814-.419L0 1zm11.354 9.646a.5.5 0 0 0-.708.708l3 3a.5.5 0 0 0 .708-.708l-3-3z"/>
                    <path fill-rule="evenodd" d="M15.898 2.223a3.003 3.003 0 0 1-3.679 3.674L5.878 12.15a3 3 0 1 1-2.027-2.027l6.252-6.341A3 3 0 0 1 13.778.1l-2.142 2.142L12 4l1.757.364 2.141-2.141zm-13.37 9.019L3.001 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z"/>
                  </svg>
                </td>
              </tr> 
              <tr><td>常用工具</td></tr>
              </table>
            </div>
            <div style="float: left; height:50px;margin-left: 10%;">
              <table>
                <tr>
                  <td>
                    <svg width="40px" height="40px" viewBox="0 0 16 16" class="bi bi-globe" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4H2.255a7.025 7.025 0 0 1 3.072-2.472 6.7 6.7 0 0 0-.597.933c-.247.464-.462.98-.64 1.539zm-.582 3.5h-2.49c.062-.89.291-1.733.656-2.5H3.82a13.652 13.652 0 0 0-.312 2.5zM4.847 5H7.5v2.5H4.51A12.5 12.5 0 0 1 4.846 5zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5H7.5V11H4.847a12.5 12.5 0 0 1-.338-2.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12H7.5v2.923c-.67-.204-1.335-.82-1.887-1.855A7.97 7.97 0 0 1 5.145 12zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11H1.674a6.958 6.958 0 0 1-.656-2.5h2.49c.03.877.138 1.718.312 2.5zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12h2.355a7.967 7.967 0 0 1-.468 1.068c-.552 1.035-1.218 1.65-1.887 1.855V12zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5h-2.49A13.65 13.65 0 0 0 12.18 5h2.146c.365.767.594 1.61.656 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4H8.5V1.077c.67.204 1.335.82 1.887 1.855.173.324.33.682.468 1.068z"/>
                    </svg>
                  </td>
                </tr>
                 <tr><td>校外访问</td></tr>
                </table>
              </div>
            <div style="float: left; height:50px;margin-left: 10%;">
              <table>
                <tr>
                  <td>
                    <svg width="40px" height="40px" viewBox="0 0 16 16" class="bi bi-credit-card-2-front" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M14 3H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z"/>
                      <path d="M2 5.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1z"/>
                      <path fill-rule="evenodd" d="M2 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
                    </svg>
                  </td>
                </tr>
                   <tr><td>论文检测</td></tr>
                  </table>
                </div>
          </div>
          <div class="item active">
            <img src="../../static/images/buaa1.jpg" id="navor_picture1" class="navor_picture" >
            <div class="carousel-caption">
            </div>
          </div>
          <div class="item">
            <img  src="../../static/images/2.jpg"  id="navor_picture2" class="navor_picture"  alt="">
            <div class="carousel-caption">
            </div>
          </div>
          
          <div class="item">
            <img  src="../../static/images/1101.jpg"  id="navor_picture3" class="navor_picture" alt="">
            <div class="carousel-caption">
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
        
      </div>
    </div>
  </div> 
  <div class="index_char">
    <div class="list_no"style="margin-top: 20px;" ></div>
    <div class="list_bh_list" >图书概况一览</div>
    <div class="char_1"  style="margin-top: 100px;">
     <div id="char_hide" style="float: left;margin-left: 10%;"> {{ species_distribution|safe }} </div>
    <div  style="float: left;margin-left: 10%;">{{ annual_borrowing_situation|safe }}</div>
     </div>
    </div>
   <div class="list_no" style="margin-top: 400px;"></div>
   <div class="list_bh_list" style="clear: both;"></div>
     <div class="div0">
    <div class="div1">
        <div class="alert alert-info" role="alert"><font size="5" >新闻动态</font></div>
        <h4><span class="label label-success" id = "news_1">12/01</span>&nbsp;<span class="label label-warning">公告</span>&nbsp;<a href="##" style="color:black; text-decoration:none">图书馆考研期间延长开馆通知</a></br></br></h4>
        <h4><span class="label label-success" id = "news_1">11/27</span>&nbsp;<span class="label label-warning">公告</span>&nbsp;<a href="##" style="color:black">图书馆关于举办知网杯“声动北航”诵读大赛的通知</a></br></br></h4>
        <h4><span class="label label-success" id = "news_1">06/25</span>&nbsp;<span class="label label-danger">新闻</span>&nbsp;<a href="##" style="color:black">校党委书记曹淑敏到图书馆调研</a></br></br></h4>
        <h4><span class="label label-success" id = "news_1">06/02</span>&nbsp;<span class="label label-danger">新闻</span>&nbsp;<a href="##" style="color:black">我馆组织召开工信部G7高校图书馆联盟工作研讨视频会</a></br></br></h4>
        <h4><span class="label label-success" id = "news_1">04/13</span>&nbsp;<span class="label label-warning">公告</span>&nbsp;<a href="##" style="color:black">疫情期间图书延期归还通知</a></h4>
    </div>
    
    <div class="div1">
        <div class="alert alert-info" role="alert"><font size="5" >资源动态</font></div>
        <!-- <div class="line"></div> -->
        <h4><span class="label label-success" id = "news_1">10/28</span>&nbsp;<span class="label label-info">试用</span>&nbsp;<a href="##" style="color:black">ICE英国土木工程师学会开通试用</a></br></br></h4>
        <h4><span class="label label-success" id = "news_1">10/28</span>&nbsp;<span class="label label-info">试用</span>&nbsp;<a href="##" style="color:black">智慧芽全球专利检索数据库开通试用</a></br></br></h4>
        <h4><span class="label label-success" id = "news_1">10/28</span>&nbsp;<span class="label label-info">试用</span>&nbsp;<a href="##" style="color:black">ICSD无机晶体结构数据库开通试用</a></br></br></h4>
        <h4><span class="label label-success" id = "news_1">09/09</span>&nbsp;<span class="label label-primary">新增</span>&nbsp;<a href="##" style="color:black">威科先行法律信息库开通使用</a></br></br></h4>
        <h4><span class="label label-success" id = "news_1">05/26</span>&nbsp;<span class="label label-primary">新增</span>&nbsp;<a href="##" style="color:black">Global Science Press开通使用</a></h4>
    </div>
</div>

<div class="div2">
    <div class="picture1">
        <span><font size="4">打造“北航云图书馆 BcLibrary”</font></span>
    </div>
    <div class="picture2">
        <span><font size="4">第四届 北航“朗读者”诵读会</font></span>
    </div>
    <div class="picture3">
        <span><font size="4">这里有场“马拉松”，关于阅读</font></span>
    </div>
    <div class="picture4">
        <span><font size="4">北航图书馆毕业季活动来啦</font></span>
    </div>
</div>
</div>
    </div>

    <div class="index_bottom" >
      <div class="list_no"style="margin-top: 450px;" ></div>
      <div class="list_bh_list">阅读推荐</div>
      <div class="row" id="book_rd" >
       <div id="re_left_bt" onclick="rechange1()" > 
         <svg width="50px"  height="50px" viewBox="0 0 16 16" class="bi bi-caret-left" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" d="M10 12.796L4.519 8 10 3.204v9.592zm-.659.753l-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z"/>
         </svg>
       </div> 
       <div class="col-xs-6 col-md-3" id="c_r1"onclick="vvv()" >
         <a href="#changep_re1" class="thumbnail" id="changep_re1">
           <img  src="{{ book_pic_1 }}" alt="...">
         </a>
         <div class="change_re" id="change_re4"><form action= "{% url 'content' %}"><button type="submit" class="btn btn-outline-success"><input type="hidden" name = 'id' value = {{ book_name_1 }}>查看详情</button></form></div>
       </div>
       <div class="col-xs-6 col-md-3"  id="c_r2">
         <a href="#changep_re1" class="thumbnail"id="changep_re2" >
           <img src="{{ book_pic_2 }}" alt="...">
          </a>
         <div class="change_re" id="change_re4"><form action= "{% url 'content' %}"><button type="submit" class="btn btn-outline-success"><input type="hidden" name = 'id' value = {{ book_name_2 }}>查看详情</button></form></div>
       </div>
       <div class="col-xs-6 col-md-3"  id="c_r3">
         <a href="#changep_re1" class="thumbnail" id="changep_re3">
           <img src="{{ book_pic_3 }}" alt="...">
         </a>
         <div class="change_re" id="change_re4"><form action= "{% url 'content' %}"><button type="submit" class="btn btn-outline-success"><input type="hidden" name = 'id' value = {{ book_name_3 }}>查看详情</button></form></div>
       </div>
       <div class="col-xs-6 col-md-3"  id="c_r4" >
         <a href="#changep_re1" class="thumbnail" id="changep_re4">
           <img src="{{ book_pic_4 }}" alt="...">
         </a>
           <div class="change_re" id="change_re4"><form action= "{% url 'content' %}"><button type="submit" class="btn btn-outline-success"><input type="hidden" name = 'id' value = {{ book_name_4 }}>查看详情</button></form></div>
       </div>
       <div id="re_right_bt" onclick="rechange2()"  > 
         <svg  width="50px" height="50px" viewBox="0 0 16 16" class="bi bi-caret-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" d="M6 12.796L11.481 8 6 3.204v9.592zm.659.753l5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"/>
         </svg>
       </div>  
     </div>
  </div>
{% include 'bottom.html'%}
</body>

</html>